<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>游戏公告</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>游戏公告{{detail.id?'修改':'添加'}}</legend>
        </fieldset>

        <form class="layui-form" action="javascript:;" lay-filter="this-form">
            <input type="hidden" name="id" :value="detail.id">
            <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">渠道类型</label>
                <div class="layui-input-inline">
                    <div id="serverGroup"></div>
                </div>
            </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">公告类型</label>
                <div class="layui-input-block">
                    <select name="type">
                        <option value="">--请选择公告类型--</option>
                        <option :value="item.id" v-for="item in type" lay-ignore="">{{item.name}}</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">标题:</label>
                <div class="layui-input-block">
                    <input type="text" name="title" :value="detail.title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">行内标题:</label>
                <div class="layui-input-block">
                    <input type="text" name="inner_title" :value="detail.inner_title" autocomplete="off" placeholder="请输入行内标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">内容:</label>
                <div class="layui-input-block">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-sm" id="bold-btn">
                                <i class="fa fa-bold"></i> 加粗
                            </button>
                            <button type="button" class="layui-btn layui-btn-sm" id="color-btn">
                                <i class="fa fa-paint-brush"></i> 颜色
                            </button>
                        </div>
                    </div>
                    <textarea name="content" class="layui-textarea" id="textarea-content" placeholder="请输入内容">{{detail.content}}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">开始时间:</label>
                <div class="layui-input-block">
                        <input type="text" name="begin_time" :value="detail.begin_time" autocomplete="off" class="layui-input" id="datetime-begin_time">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">结束时间:</label>
                <div class="layui-input-block">
                        <input type="text" name="end_time" :value="detail.end_time" autocomplete="off" class="layui-input" id="datetime-end_time">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序:</label>
                <div class="layui-input-block">
                    <input type="text" name="sort" :value="detail.sort" autocomplete="off" placeholder="请输入行内标题" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/js/common.js?v=5" charset="utf-8"></script>
<script src="/xm-select-v1.2.4/xm-select.js"></script>

<script>
    var Id = urlParam('id')
    var form = null;
    var laydate = null;
    var _this=null;
    var $ = null;
    var layer = null;
    var serverGroup = getEnum('channel')
    serverGroup.unshift({ id: 0, name: "全部" });
    new Vue({
        el:"#app",
        data:{
            type:[
                { id: 0, name: "游戏公告" },
                { id: 1, name: "维护公告" },
                { id: 2, name: "更新公告" },
                { id: 3, name: "合服公告" },
                { id: 4, name: "开服公告" }
            ],
            detail:{ // Vue 赋值, layui取值
                id:Id,
                title:null,
                inner_title:null,
                content:null,
                begin_time:null,
                end_time:null,
                sort:null
            },
            id:Id,
        },
        methods:{

        },
        created:function(){
            _this = this;
            layui.use(['form','laydate'],function(){
                $ = layui.$;
                form = layui.form;
                laydate = layui.laydate;
                layer = layui.layer;
            })
        },
        updated:function(){
            form.render();
        },
        mounted:function(){
            layui.use(['form'], function () {
                //初始化
            laydate.render({
                elem:"#datetime-begin_time",
                value: "",
                type: 'datetime'
            });
            laydate.render({
                elem:"#datetime-end_time",
                value: "",
                type: 'datetime'
            });
                var data = [];
                if (Id) { // 编辑操作
                    $.get("/admin/announcement/" + Id, {}, function(res) { // 获取数据
                        if (res.code === 0) {
                            _this.detail = res.data;
                            console.log('返回的数据:',res.data)
                            if(res.data.serverGroup){
                            // 将 res.data.serverGroup 字符串拆分成数组
                            const serverGroupIds = res.data.serverGroup.split(',').map(id => parseInt(id.trim()));

                            // 遍历 serverGroup 对象,构建 data 数组
                            for (const server of Object.values(serverGroup)) {
                                data.push({
                                    name: server.name,
                                    value: server.id,
                                    selected: serverGroupIds.includes(server.id) // 如果 id 在 serverGroupIds 中,则设置为选中状态
                                });
                            }
                            console.log('组装的data:',data)
                                // 渲染 xmSelect 选择器
                                xmSelect.render({
                                    el: '#serverGroup',
                                    name: "serverGroup",
                                    language: 'zn',
                                    data: data
                                });

                            }else {
                                // 新建操作
                                console.log('群主列表:',serverGroup)
                                for (const server of Object.values(serverGroup)) {
                                    data.push({
                                        name: server.name,
                                        value: server.id
                                    });
                                }

                                // 渲染 xmSelect 选择器
                                xmSelect.render({
                                    el: '#serverGroup',
                                    name: "serverGroup",
                                    language: 'zn',
                                    data: data
                                });
                            }

                        }
                    });
                } else {
                    // 新建操作
                    for (const server of Object.values(serverGroup)) {
                        data.push({
                            name: server.name,
                            value: server.id
                        });
                    }

                    xmSelect.render({
                        el: '#serverGroup',
                        name: "serverGroup",
                        language: 'zn',
                        data: data
                    });
                }


            //监听提交
            form.on('submit(submit)', function (data) {
                var formData = data.field;

                if (Id){ //update
                    formData._method = 'put';
                    layer.confirm('确定修改吗?',{icon:3},function () {
                        $.post("/admin/announcement/"+Id,formData,function(res){
                            if (res.code===0){
                                layer.msg('success',{icon:6,time:500},function(){
                                    parent.location.reload();//父页面刷新
                                })
                            } else {
                                layer.msg(res.msg,{icon:5})
                            }
                        })
                    })

                } else { //add

                    layer.confirm('确定添加吗?',{icon:3},function () {
                        $.post("/admin/announcement/insert",formData,function(res){
                            if (res.code===0){
                                layer.msg('success',{icon:6,time:500},function(){
                                    parent.location.reload(); //父页面刷新
                                })
                            } else {
                                layer.msg(res.msg,{icon:5})
                            }
                        })
                    })

                }
                return false;
            });

            // 添加加粗按钮点击事件
            $('#bold-btn').on('click', function() {
                const textarea = document.getElementById('textarea-content');
                const start = textarea.selectionStart;
                const end = textarea.selectionEnd;
                const selectedText = textarea.value.substring(start, end);
                
                if (selectedText) {
                    const newText = textarea.value.substring(0, start) + 
                                  '[b]' + selectedText + '[/b]' + 
                                  textarea.value.substring(end);
                    textarea.value = newText;
                    // 重新设置光标位置
                    textarea.selectionStart = start + 3;
                    textarea.selectionEnd = end + 3;
                }
            });

            // 添加颜色按钮点击事件
            $('#color-btn').on('click', function() {
                const textarea = document.getElementById('textarea-content');
                const start = textarea.selectionStart;
                const end = textarea.selectionEnd;
                const selectedText = textarea.value.substring(start, end);
                
                if (selectedText) {
                    // 预定义颜色列表
                    const colors = [
                        { hex: '#FF0000', name: '红色' },
                        { hex: '#00FF00', name: '绿色' },
                        { hex: '#0000FF', name: '蓝色' },
                        { hex: '#00FFFF', name: '青色' },
                        { hex: '#FFFF00', name: '黄色' },
                        { hex: '#FF00FF', name: '紫红色' },
                        { hex: '#000000', name: '黑色' },
                        { hex: '#FFFFFF', name: '白色' },
                        { hex: '#808080', name: '灰色' },
                        { hex: '#8B0000', name: '深红色' },
                        { hex: '#006400', name: '深绿色' },
                        { hex: '#00008B', name: '深蓝色' },
                        { hex: '#ADD8E6', name: '淡蓝色' },
                        { hex: '#90EE90', name: '淡绿色' },
                        { hex: '#FFFFE0', name: '浅黄色' },
                        { hex: '#FFA500', name: '橙色' },
                        { hex: '#9400D3', name: '紫色' },
                        { hex: '#A52A2A', name: '棕色' },
                        { hex: '#FF69B4', name: '粉红色' },
                        { hex: '#E0FFFF', name: '淡青色' }
                    ];

                    // 创建颜色选择面板的HTML
                    let colorPanelHtml = '<div style="padding: 15px;">';
                    colorPanelHtml += '<div style="margin-bottom: 10px;"><input type="color" id="color-picker" value="#000000" style="width: 100%;"></div>';
                    colorPanelHtml += '<div style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px;">';
                    
                    colors.forEach(color => {
                        colorPanelHtml += `
                            <div class="color-item" data-color="${color.hex}" 
                                style="cursor: pointer; padding: 8px; text-align: center; border: 1px solid #ddd; border-radius: 4px;">
                                <div style="width: 100%; height: 20px; background-color: ${color.hex}; margin-bottom: 4px; border: 1px solid #ddd;"></div>
                                <div style="font-size: 12px;">${color.name}</div>
                                <div style="font-size: 10px;">${color.hex}</div>
                            </div>
                        `;
                    });
                    
                    colorPanelHtml += '</div></div>';

                    layer.open({
                        type: 1,
                        title: '选择颜色',
                        area: ['500px', '500px'],
                        content: colorPanelHtml,
                        success: function(layero, index) {
                            // 为每个颜色块添加点击事件
                            $(layero).find('.color-item').on('click', function() {
                                const color = $(this).data('color');
                                const newText = textarea.value.substring(0, start) + 
                                              '[color=' + color + ']' + selectedText + '[/color]' + 
                                              textarea.value.substring(end);
                                textarea.value = newText;
                                textarea.selectionStart = start + 8 + color.length;
                                textarea.selectionEnd = end + 8 + color.length;
                                layer.close(index);
                            });

                            // 为自定义颜色选择器添加事件
                            $(layero).find('#color-picker').on('change', function() {
                                const color = $(this).val();
                                const newText = textarea.value.substring(0, start) + 
                                              '[color=' + color + ']' + selectedText + '[/color]' + 
                                              textarea.value.substring(end);
                                textarea.value = newText;
                                textarea.selectionStart = start + 8 + color.length;
                                textarea.selectionEnd = end + 8 + color.length;
                                layer.close(index);
                            });
                        }
                    });
                }
            });
        });
    }
    })
</script>
</body>
</html>
